<!DOCTYPE html>
<html>
<head>
	<title>登陆</title>
	<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.log{
			height: 300px;
			width:400px;
			border: 1px solid #ddd;
			border-radius: 5px;
			position:fixed;
			top:50%;
			left:50%;
			margin-top: -150px;
			margin-left:-200px;
			box-shadow: 4px 4px 2px #888888;
			padding: 5px 5px


		}

		.username{
			display: flex;
			margin:10px 60px;
			line-height: 40px
			/*flex-direction: column;*/

		}
		.title{
			text-align: center;
			font-size:20px;
			font-weight: bold;
			line-height: 50px;
			margin-bottom: 30px

		}
		.input{
			width:200px;			
			height:30px;

		}
		.in{
			width: 100%;
			height: 100%;
		}
		.button{

			width: 80px;
			height: 30px;
			background-color:green;
			color:#fff;
			text-align: center;
			line-height: 30px;
			border-radius: 5px;
			margin-left: 40%;
			margin-top: 50px;
			border:1px solid #008B00;
			font-size: 14px;

		}
		.tip{
			color:red;
			font-size: 13px;
			line-height: 20px;
			text-align: center;
			display: none

		}


	</style>
</head>
<body>


	<form action="/vlogin" method="post">
		<div class="log">
			<div class="title">
				登陆
			</div>
			 <div class="username">
			 	<div>账号</div>
			 	<div class="input"><input class="in" type="text" name="username"></div>

			 </div>
			 <div class="username">
			 	<div>密码</div>
			 	<div class="input"><input class="in" type="password" name="password"></div>
			 </div>
			 <div class="tip" {% if error %} style="display: block;" {% endif %}>
			 		账号或密码错误
			 </div>
			 <div class="btndiv">
			 	<button class="button">登陆</button>

			 </div>
		</div>
	</form>



</body>
</html>